<template>
    <div :style="{display:block?'none':'block'}">
      
      <el-row style="display: flex;align-items: center;gap: 10px;">
        <div>选择班级</div>
        <el-select 
          v-model="courseQueryForm.clazzId"
          @change="changeClass" 
          placeholder="请选择班级">
          <el-option
            v-for="item in classOption"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>  
      </el-row>

      <el-divider></el-divider>

      <el-table 
        :data="tableData" 
        border
        style="width: 100%">
        <el-table-column prop="courseName" label="名称"/>
        <el-table-column prop="activityName" label="活动"/>
        <el-table-column prop="className" label="班级"/>
        <el-table-column prop="teacherName" label="教师"/>
        <el-table-column
          fixed="right"
          label="操作"
          width="250">
          <template slot-scope="scope">
            <el-button @click="handleOpenStudy(scope.row)" type="text">去学习</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <el-pagination
        background    
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[4,5,6,7]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total" 
        style="margin-top: 30px;"/>


      <el-dialog :visible.sync="studyDialogVisible" width="600px" title="查看学习内容">
        <el-row>
            <el-row>
                <el-tree
                :data="treeData"
                :props="props"
                show-checkbox
                node-key="id"
                ref="tree"
                default-expand-all
                :current-node-key="13"
                style="width: 500px;"
                :expand-on-click-node="false">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span>{{ node.label }}</span>
                    <span>
                    <el-button
                        type="text"
                        size="mini"
                        :disabled="!data.docPath"
                        @click="() => handleDoc(node, data)">
                        下载文档
                    </el-button>
                    <el-button
                        type="text"
                        size="mini"
                        :disabled="!data.videoPath"
                        @click="() => handleVideo(node, data)">
                        下载视频
                    </el-button>
                    
                    </span>
                </span>
                </el-tree>
            </el-row>
        </el-row>
      </el-dialog>
      
      
    </div>
  </template>
  
<script>
  import { optionClass } from '@/api/class';
  import { listCourse, listUnit} from '@/api/course';
  import { getStudentId } from '@/api/student';
  import { getTeacherId } from '@/api/teacher';
  import axios from 'axios';
  import { Message, MessageBox } from 'element-ui';
  
  export default {
    data(){
      return{
        total:undefined,
        currentPage:undefined,
        block:false,
        file:undefined,
        studentId:undefined,
        addDialogVisible: false,
        editDialogVisible: false,
        studyDialogVisible: false,
        videoRenew: false,
        docRenew: false,
        courseQueryForm:{
            pageNum:1,
            pageSize:5,
            clazzId:''
        },
        classOption:[],
        courseOption:[],
        tableData:[],
        queryForm:{},
        cur:{},
        upload:{},
        unitForm:{},
        treeData:[],
        props:{
          label:'unitTitle',
          children:'sectionListVos'
        },
        curCourse:undefined
      }
    },
    methods:{
      init(){
        let id = this.$store.state.user.id || JSON.parse(localStorage.getItem('user')).id
        
        getStudentId(id).then(res=>{
            this.studentId = res.data
            
            this.queryForm.studentId = res.data
            optionClass(this.queryForm).then(res=>{
                this.classOption = res.data
                if(!this.classOption.length){
                    this.block = true
                    MessageBox.alert(`当前教师账号未分配教学班，请联系活动管理员`).then(()=>{}).catch(()=>{})
                }else{
                    this.courseQueryForm.clazzId = this.classOption[0].id
                    this.getCourseList()
                }
            }).catch(()=>{})
        }).catch(()=>{})
      },
      getCourseList(){
        listCourse(this.courseQueryForm).then(res=>{
            console.log('courses:',res);
            this.tableData = res.row
        }).catch(()=>{})
      },
      handleOpenStudy(data){
        this.studyDialogVisible = true
        listUnit(data.id).then(res=>{
            this.treeData = res.data
        }).catch(()=>{})
      },
      changeClass(id){
        this.courseQueryForm.clazzId = id
        this.getCourseList()
      },
  
      handleDoc(node,data){
        this.downlaod({path:data.docPath})
      },
      handleVideo(node,data){
        this.downlaod({path:data.videoPath})
      },
    
      cancelDialog(){
        this.studyDialogVisible = false
        this.treeData = []
      },
     
  
      // 下载文件
      downlaod(data){
        let list = data.path.split('/')
        
        let name = list[list.length-1]
        axios({
          method: 'POST',
          url: '/common/download',
          headers: {
            Authorization: this.$cookies.get('cp-token')
          },
          responseType: 'blob' // 关键设置，指定接收的响应类型为blob（二进制大对象），用于接收文件流
        }).then((response) => {
          const url = window.URL.createObjectURL(new Blob([response.data], { type: response.headers['content-type'] }));
          const link = document.createElement('a');
          link.href = url;
          link.setAttribute('download', name); // 设置下载文件名，与后端设置的尽量一致
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          window.URL.revokeObjectURL(url);
        }).catch((error) => {
          console.log(error);
        });
      },







    handleSizeChange(size){
        this.queryForm.pageSize=size
        this.getListStu(this.queryForm)
    },
    handleCurrentChange(page){
        this.queryForm.pageNum=page
        this.getListStu(this.queryForm)
    },
    },
    created(){
      this.init()
    }
  }
  </script>
  
  <style lang="scss">
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .content{
    height: 500px;
    .tree-col{
      border-right: 1px solid #cfcccc !important;
    }
  }
  .node-content{
    padding: 30px;
  }
  .line{
    display: flex;
    gap: 20px;
    font-size: 20px;
  }
  .line1{
    font-size: 30px;
    margin-bottom: 20px;
  }
  .file-area{
    margin-top: 40px;
  }
  </style>